<template>
  <teleport to="body">
    <div class="el-notification" v-show="visible" :style="positionStyle" @click="onClickHandler">
      <div class="el-notification__group">
        <h2 class="el-notification__title">{{ title }}</h2>
        <div class="el-notification__content">
          <p>{{ message }}</p>
        </div>
      </div>
      <div class="el-notification__closeBtn" @click="handleClose">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
          <path
            fill="currentColor"
            d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
          ></path>
        </svg>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ElNotification'
})
</script>

<script setup lang="ts">
import { ref, withDefaults, computed } from 'vue'
interface Props {
  title?: string
  message?: string
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  message: '',
  position: 'top-right'
})
const columnDir = computed(() => {
  return props.position.startsWith('top') ? 'top' : 'bottom'
})
const rowDir = computed(() => {
  return props.position.startsWith('left') ? 'left' : 'right'
})

const positionStyle = computed(() => {
  return {
    [columnDir.value]: '50px',
    [rowDir.value]: '10px'
  }
})

function onClickHandler() {
  console.log('click')
}
const visible = ref<boolean>(true)
function handleClose() {
  console.log('close')
  visible.value = false
}
</script>

<style lang="scss" scoped>
@import '../../styles/mixin';

@include b(notification) {
  position: fixed;
  top: 50px;
  right: 10px;
  width: 330px;
  padding: 14px 26px 14px 13px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  @include e(closeBtn) {
    position: absolute;
    top: 18px;
    right: 15px;
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: #909399;
    cursor: pointer;
  }
}
</style>
